<template>
<div class="block">
   <myhead></myhead>
   <search :ar='arg'></search>
   <list :letter='letter' :ar='arg'></list>
   <alp @letterClick='letterClick' :ar='arg'></alp>
</div>
</template>

<script>
import head from './components/myHead.vue'
import search from './components/search.vue'
import list from './components/list.vue'
import alp from './components/alphabet.vue'
import axios from 'axios'
export default {
  name: 'city',
  components: {
    myhead: head,
    search,
    list,
    alp
  },
  data () {
    return {
      arg: {},
      letter: ''
    }
  },
  mounted () {
    axios.get('/api/city.json').then((data) => {
      this.arg = data.data.data
      // console.log(this.arg)
      // console.log(data.data.data)
    })
  },
  methods: {
    letterClick (e) {
      // console.log(e)
      this.letter = e
    }
  }
}
</script>

<style lang='stylus' scoped>
</style>
